 <template>
 <el-row class="home" :guter="'20'">
    <el-col :span="8" style="margin-top:10px;">
      <el-card shadow="hover" >
         <div class="user">
            <img :src="userImg">
            <div class="userinfo">
               <p class="name">admin</p>
               <p class="access">超级管理员</p>
            </div>
         </div>
         <div class="login-info">
           <p>上次登录时间：<span>2022-8-8</span></p>
           <p>上次登录地点：<span>武汉</span></p>
         </div>
      </el-card>
      <el-card style="margin-top:20px;height:480px;">
        <el-table :data="tableData">
         <!-- 疑问？这里的prop和 label，是怎么回事呢？-->
          <el-table-column v-for="(val,key) in tableLable" :key="key" :prop="key" :label="val"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
      <el-col :span="16" style="margin-top:10px;">
         <div class="num">
            <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
                <i class="icon" :style="`background-color:${item.color};`" :class="`el-icon-${item.icon}`"></i>
                <div class="detail">
                  <p class="num">￥{{item.value}}</p>
                  <p class="txt">{{item.name}}</p>
                </div>
            </el-card>
         </div>
         <el-card style="height:280px">
           <div style="height:280px" ref="echarts">
             
           </div>
         </el-card>
         <div class="garph">
            <el-card style="height:260px">
              <div style="height:240px" ref="userEcharts"></div>
            </el-card>
            <el-card style="height:260px">
               <div style="height:240px" ref="videoEcharts"></div>
            </el-card>
         </div>
      </el-col>
 </el-row>
  </template>
  
  <script>
   import {getData} from '../../api/data.js'
   import * as echarts from 'echarts'
  export default {
     name:'home',
     data() {
      return {
         userImg: require('../../src/assets/img/user.png'),
         tableData:[],
         countData:[
              {
               name:'今日支付订单',
               value:634,
               icon:'success',
               color:'#2ec7c9'
              },
              {
               name:'今日收藏订单',
               value:210,
               icon:'star-on',
               color:'#ffb980'
              },
              {
               name:'今日未支付订单',
               value:188,
               icon:'s-goods',
               color:'#FF0000'
              },
              {
               name:'本月支付订单',
               value:1234,
               icon:'success',
               color:'#2ec7c9'
              },
              {
               name:'本月收藏订单',
               value:445,
               icon:'star-on',
               color:'#ffb980'
              },
              {
               name:'本月未支付订单',
               value:254,
               icon:'s-goods',
               color:'#FF0000'
              },
         ],
         tableLable:{
            name:'品牌',
            todayBuy:'今日购买',
            monthBuy:'本月购买',
            totalBuy:'总购买'
         }
      }
     },
     mounted(){
      getData().then(res=>{
         const {code,data}=res.data
         if(code === 20000){
            this.tableData = data.tableData        
            const order = data.orderData
            const xData = order.date
            const keyArray =  Object.keys(order.data[0])
            const series = []
            keyArray.forEach(key =>{
               series.push({
                  name:key,
                  data:order.data.map(item => item[key]),
                  type:'line'
               })
            })
            //折线图
            const option = {
               xAxis:{
                  data:xData
               },
               yAxis:{
                  
               },
               legend:{
                  data:keyArray
               },
               series
            }
             const E = echarts.init(this.$refs.echarts)
             E.setOption(option)
             //用户图
             const userOption = {
                  legend:{
                     //图例文字颜色
                     textStyle:{
                        color:'#333'
                     },
                  },
                  grid:{
                     left:'20%',
                  },
                  //提示框
                  tooltip:{
                     trigger:'axis',
                  },
                  xAxis:{
                     type:'category',
                     data:data.userData.map(item =>item.date),
                     axisLine:{
                        lineStyle:{
                           color:'#17b3a3'
                        },
                     },
                     axisLabel:{
                        interval:0,
                        color:'#333'
                     },
                  },
                  yAxis:[
                     {
                        type:'value',
                        axisLine:{
                           lineStyle:{
                              color:'#17b3a3'
                           },
                        },
                     },
                  ],
                  color:['#2ec7c9','#b6a2de'],
                  series:[
                     {
                        name:'新增用户',
                        data:data.userData.map(item => item.new),
                        type:'bar'
                     },
                     {
                        name:'活跃用户',
                        data:data.userData.map(item => item.active),
                        type:'bar'
                     }
                  ],
             }
            const U = echarts.init(this.$refs.userEcharts)
            U.setOption(userOption)
            //饼图
            const videoOption = {
               tooltip:{
                  trigger:'item',
               },
               color:[
                  '#0f78f4',
                  '#dd536b',
                  '#9462e5',
                  '#a6a6a6',
                  '#e1bb22',
                  '#39c362',
                  '#3ed1cf',
               ],
               series:[
               {
                  data: data.videoData,
                  type:'pie'
               }

               ],
            }
            const V = echarts.init(this.$refs.videoEcharts)
            V.setOption(videoOption)
         }
         console.log(res);
       })
       
     }

  }
  </script>
  
  <style lang="less" scoped>
     .el-card{
      background-color: rgb(254, 254, 254);
      .user{
           display: flex;
           border-bottom: 1px solid rgb(234, 210, 167);
           padding-bottom: 10px;
         //   justify-content: center;
         .name{
            font-size: 28px;
            line-height: 28px;
            margin-bottom: 2px;
         }
         img{
         width: 110px;
         height: 110px;
         border-radius: 50%;
         margin-right: 50px;
      }
      }
      .login-info{
           span{
            color: rgb(116, 114, 114);
            margin-left: 20px;
           }
      }
     }
     .num{
      display: flex;
      flex-flow: wrap;
      justify-content: space-evenly;
      .el-card{
         margin-bottom: 20px;
         height: 80px;
      }
      .icon{
         width:80px;
         text-align: center;
         line-height: 80px;
         font-size: 30px;
         color:white;
      }
      .detail{
         width: 170px;
         .txt{
            margin-bottom: 3px;
            text-align: center;
            color: rgb(152, 150, 150);
         }
         .num{
            font-weight: 700;
            font-size: 25px;
            margin: 0;
            padding: 0;
         }
      }
     }
     .garph{
      display: flex;
      justify-content: space-between;
      .el-card{
         width: 48%;
         margin-top: 6px;

      }
     }
  </style>